layui

2023-06-04 17:46| 来源: 网络整理| 查看: 265

表格数据分动态和静态的 layui提供了个layui.table模块组件，可以快速开发表格数据显示

html前端调用table标签scrip引用layui库JavaScript执行操作，所有layui库的操作都在layui.use(['table', 'form', 'jquery','common'], function() {}中执行调用table.render，执行生命周期：执行table.render->调用before函数->http执行成功则先调用parseData函数->表格数据加载渲染完成调用done函数通过http GET接口获取表格显示数据 table.render({ elem: '#user-table', url: 'http://aaaa.cn/test', method: 'get', where:{ uart_len:0, device_id:'000000000' }, page: true, limit: 10, data:[], scrollPos:'fixed', cols: cols, skin: 'row', editTrigger: 'dblclick', // lineStyle: 'height: 30px;', toolbar: '#user-toolbar', defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh', }, 'filter', 'print', 'exports'], parseData: function(res){ //res 即为原始返回的数据 return tableUpdateParams; }, before: function(res, curr, count) { }, done: function(res, curr, count) { } }); 字段说明 where GET请求参数，以上请求链接等价于http://aaaa.cn/test?uart_len=0&device_id:000000000，直接链接的方式的时候，参数值都是字符串类型，而且不需要加双引号的data：字段类型，列表，功能详单于parseData说明中的数据格式的data，加载静态显示数据，和http操作二选一函数说明 parseData 由于layui.table的数据格式是固定的，如下 { code: 0 ,msg: '' ,count: 0 ,data: [{ device_id : '' }] }

data字段类型为列表，列表中每个对象为每行的显示数据。如果GET请求回来的数据不是按照这个格式返回的需要经过转换才能正常加载显示数据，parseData函数就是用来做中间数据格式转换的，轻度重载不会改变任何参数，深度重载只改变table.reload时填写的参数，其他参数保持调用table.render时的值。

重载表格显示数据

重载分两种，不管调用哪种方式都是按照执行生命周期来执行，

轻度重载

只重载显示数据

table.reloadData('user-table', {}); 深度重载

重载所有参数，包括url、where等参数，true表示打开深度重载

table.reload('user-table',{ where:{ uart_len:1, device_id:'000000000', max_id:1 }} , true); ```

【本文地址】

layui

layui

今日新闻

推荐新闻